<template>
    <div class="vditor-reset">
        <el-skeleton v-if="editorLoading" :rows="5" animated />
        <div v-html="content"></div>
    </div>
</template>

<script setup lang="ts">
import Vditor from 'vditor';
import { ref, watch } from 'vue';
import 'vditor/dist/index.css'

const content = ref('')
const editorLoading = ref(true)

const props = defineProps(['value'])

watch(() => props.value, () => {
    Vditor.md2html(props.value, {
        mode: 'light',
    }).then(html => {
        editorLoading.value = false
        content.value = html
    })
})

// Vditor.md2html(props.value, {
//     mode: 'light'
// }).then(html => {
//     content.value = html
// })

</script>

<!-- <style scoped>

</style> -->